<template>
    <div class="title-group" :class="{'title-boreder-bottom':props.borderBotton}">
        <div class="left-group">
            <svg aria-hidden="true" class="title_icon">
                <use :xlink:href="`#${props.icon}`"></use>
            </svg>
            <span>{{ title }} </span>
        </div>
        <div class="right-group right-txt" >
            <span>{{ right_txt }}</span>
        </div>
    </div>
</template>
<script setup>

const props = defineProps({
    title:{
        type:String,
        default:'',
    },
    icon:{
        type:String,
        default:''
    },
    'right_txt':{
        type:String,
        defalut:''
    },
    'borderBotton':{
        type:Boolean,
        defalut:false
    }
});
</script>

<style lang="less" scoped>
.title-group {
    display: flex;
    background: white;
    font-size: 1.3em;
    padding: 6px 10px;
    /* color: black; */
    align-items: center;
    justify-content: space-between;
    .left-group{
        display: flex;
        align-items: center;
    }
}

.title-group svg.title_icon {
    height: 1.5em;
    width: 1.5em;
    margin-right: 8px;
}
.title-group.title-boreder-bottom {
    border-bottom: 1px solid #e5e5e5;
}
</style>